<template>
  <view class="lamp-map" :class="{ readonly: !canEdit }">
    <view v-if="!lampMapList.length" class="no-content">暂无数据</view>
    <view class="map-list">
      <view v-for="item in lampMapList" :key="item.key" class="map-item">
        <image class="map-image" :src="item.src" mode="aspectFill" @click="previewImg()"></image>
        <view class="map-info">
          <view class="map-name">{{item.name}}</view>
          <view v-if="canEdit" class="map-operate">
            <view class="operate-btn primary" @click="toMark(item)">标注</view>
            <view class="operate-btn success" @click="toEdit(item)">编辑</view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="canEdit" class="page-bottom-btn" @click="toAddOrEditMap()">上传地图</view>
  </view>
</template>

<script>
import { getImagePath } from '@/utils/index.js'
export default {
  props: {
    projectInfo: {
      type: Object
    }
  },
  data() {
    return {
      lampMapList: []
    }
  },
  computed: {
    canEdit() {
      return this.projectInfo.canEdit
    }
  },
  watch: {
    projectInfo() {
      this.initData()
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      this.lampMapList = this.projectInfo.lampMapList
    },
    toMark(target) {
      uni.navigateTo({
        url: `/pages/project-detail/lamp-map-mark/lamp-map-mark?projectId=${this.projectInfo.id}&id=${id}`
      })
    },
    toEdit(target) {
      this.toAddOrEditMap(target.id)
    },
    toAddOrEditMap(id) {
      uni.navigateTo({
        url: `/pages/project-detail/add-map/add-map?projectId=${this.projectInfo.id}${id ? `&id=${id}` : ''}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.no-content {
  margin-top: 25vh;
  text-align: center;
  color: $text-secondary;
}
.map-item {
  background-color: $white;
  border-radius: 10rpx;
  margin-top: 20rpx;
  &:first-child {
    margin-top: 0;
  }
}
.map-image {
  height: 480rpx;
  width: 100%;
  border-top-left-radius: 10rpx;
  border-top-right-radius: 10rpx;
  display: block;
}
.map-info {
  padding: 20rpx 30rpx 24rpx;
  .map-name {
    font-size: $font-size-4;
  }
  .map-operate {
    margin-top: 10rpx;
    display: flex;
    justify-content: flex-end;
    .operate-btn {
      height: 50rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10rpx;
      padding: 6rpx 20rpx;
      color: $white;
      font-size: $font-size-1;
      & +.operate-btn {
        margin-left: 20rpx;
      }
      &.primary {
        background-color: $primary;
      }
      &.success {
        background-color: $success;
      }
    }
  }
}
</style>
